<template>
  <div>
    <h1>x坐标：{{ pos.x }}</h1>
    <h1>y坐标：{{ pos.y }}</h1>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive } from 'vue';
// 业务1
let pos = reactive({
  x: 0,
  y: 0,
});
let getPos = (e) => {
  pos.x = e.pageX;
  pos.y = e.pageY;
};
onMounted(() => {
  console.log('第一个onMounted');
  document.addEventListener('mousemove', getPos);
});
onUnmounted(() => {
  document.removeEventListener('mousemove', getPos);
});

// 业务2
onMounted(() => {
  console.log('第二个onMounted');
});
</script>
